<template>
  <el-form ref="formData" :model="formData" :rules="rules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model.trim="formData.name"  />
    </el-form-item>

    <el-form-item label="手机号码" prop="phone">
      <el-input v-model.trim="formData.phone" />
    </el-form-item>


    <el-form-item label="旧密码">
      <el-input v-model.trim="formData.oldPassword" show-password />
    </el-form-item>

    <el-form-item label="新密码">
      <el-input v-model.trim="formData.newPassword" show-password />
    </el-form-item>

    <el-form-item label="再次输入新密码">
      <el-input v-model.trim="formData.againPassword" show-password />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">更新</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  watch:{
    user: {
      handler: function(value) {
        this.formData.id=value.id||'';
        this.formData.name=value.name||'';
        this.formData.phone=value.phone||'';
      },
      immediate: true,
      deep: false
    }
  },
  data(){
    return {
      visible:false,
      title:'',
      loading:false,
      formData: {
        id: '',
        name: '',
        phone: '',
        oldPassword:'',
        newPassword:'',
        againPassword:'',
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名字.',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 50,
          message: '长度在 1 到 50 个字符',
          trigger: 'blur'
        }
        ],
        phone: [{
          required: true,
          message: '请输入手机号码.',
          trigger: 'blur'
        },
        {
          min: 11,
          max: 11,
          message: '手机号码有误.',
          trigger: 'blur'
        }
        ],
      }
    }
  },
  methods: {
    submit() {
      this.$message({
        message: 'User information has been updated successfully',
        type: 'success',
        duration: 5 * 1000
      })
    }
  }
}
</script>
